import { Spin, Tooltip, Radio, Input, Space  , Col, Row, DatePicker,Divider,Image } from 'antd';

import {
  LeftOutlined,
  RightOutlined,
  PlusCircleOutlined,
  MinusCircleOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  ArrowLeftOutlined
} from '@ant-design/icons'
import React, { useState} from 'react';
const { RangePicker } = DatePicker;
import styles from './style.less'

import { SearchOutlined} from '@ant-design/icons';
import { Document, Page, pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`
import pdfurl from '/public/test.pdf';
export type MapProps = {
  style?: React.CSSProperties,
  url?:string
};
const Pdfview: React.FC<MapProps> = (props) =>  {
  const { style,url} = props;
  const [pageNumber, setPageNumber] = useState(1)
  const [pageNumberInput, setPageNumberInput] = useState(1)
  const [pageNumberFocus, setPageNumberFocus] = useState(false)
  const [numPages, setNumPages] = useState(1)
  const [pageWidth, setPageWidth] = useState(600)
  const [fullscreen, setfullscreen] = useState<boolean>(false)


  const onDocumentLoadSuccess = ({ numPages }: any) => {
    setNumPages(numPages)
  }
  const lastPage = () => {
    if (pageNumber == 1) return
    const page = pageNumber - 1
    setPageNumber(page)
    setPageNumberInput(page)
  }
  const nextPage = () => {
    if (pageNumber === numPages) return
    const page = pageNumber + 1
    setPageNumber(page)
    setPageNumberInput(page)
  }
  const onPageNumberFocus = (e: any) => {
    setPageNumberFocus(true)
  }
  const onPageNumberBlur = (e: any) => {
    setPageNumberFocus(false)
    setPageNumberInput(pageNumber)
  }
  const onPageNumberChange = (e: any) => {
    let value = e.target.value
    value = value <= 0 ? 1 : value
    value = value >= numPages ? numPages : value
    console.log('-----------------------')
    console.log(value)
  
    setPageNumberInput(value)

  }
  const toPage = (e: any) => {

    console.log(e.target.value)
    setPageNumber(Number(e.target.value))
  }
  const pageZoomOut = () => {
    if (pageWidth <= 600) return
    const width = pageWidth * 0.8
    setPageWidth(width)
  }
  const pageZoomIn = () => {
    const width = pageWidth * 1.2
    setPageWidth(width)
  }
  const pageFullscreen = () => {
    if (fullscreen) {
      setFullscreen(false)
      setPageWidth(600)
    } else {
      setFullscreen(true)
      setPageWidth(window.screen.width - 40)
    }
  }

  const [value,setValue] = useState<number>(1)  
  function onChange(e) {
    console.log('radio checked', e.target.value);
    setValue(e.target.value)
     
  };
  const onSearch = (val) => {
    console.log('search:', val);
  }
    return (
     
      
            <Row className={styles.view}>
   <div className={styles.pageContainer} >
     <Document file={url} onLoadSuccess={onDocumentLoadSuccess} loading={<Spin size="large" />}>
       <Page pageNumber={pageNumber} width={pageWidth} loading={<Spin size="large" />} />
     </Document>
   </div>
   <div className={styles.pageTool}>
     <Tooltip title={pageNumber == 1 ? '已是第一页' : '上一页'}>
       <LeftOutlined className={styles.outlined} onClick={lastPage} />
     </Tooltip>
     <Input
       value={pageNumberFocus ? pageNumberInput : pageNumber}
       onFocus={onPageNumberFocus}
       onBlur={onPageNumberBlur}
       onChange={onPageNumberChange}
       onPressEnter={toPage}
       type="number"
     />
     / {numPages}
     <Tooltip title={pageNumber == numPages ? '已是最后一页' : '下一页'}>
       <RightOutlined className={styles.outlined} onClick={nextPage} />
     </Tooltip>
     <Tooltip title="放大">
       <PlusCircleOutlined className={styles.outlined} onClick={pageZoomIn} />
     </Tooltip>
     <Tooltip title="缩小">
       <MinusCircleOutlined className={styles.outlined} onClick={pageZoomOut} />
     </Tooltip>
     <Tooltip title={fullscreen ? '恢复默认' : '适合窗口'}>
       {fullscreen ? (
         <FullscreenExitOutlined className={styles.outlined} onClick={pageFullscreen} />
       ) : (
         <FullscreenOutlined className={styles.outlined} onClick={pageFullscreen} />
       )}
     </Tooltip>
   </div>
 </Row>  );
};

export default Pdfview;